<script setup>
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';



import { computed, ref } from "vue";
const desc = ref('双向绑定的参数')
const data = computed(() => {
  return [{
    txt:desc.value
  }]
})
const showTxt = () => {
  console.log(desc.value);
}
</script>

<template>
  <div class="edit">
    <QuillEditor theme="snow" v-model:content="desc" :contentType="'html'" :toolbar="[]" />
  </div>
  <el-table :data="data" >
    <el-table-column label="Date">
      <template #default="scope">
        <div class="demo" v-html="scope.row.txt"></div>
      </template>
    </el-table-column>
  </el-table>
  <div @click="showTxt">展示</div>
  <div class="warp">
    <div class="warp_item1"></div>
    <div class="warp_item2"></div>
  </div>
</template>

<style scoped lang="scss">
.demo{
    white-space:pre;
  color: red;
}
.warp{
  display: flex;
}
.warp_item1{
  width:100px;
  height: 10px;
  background: #ACD679;
  clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}
.warp_item2{
  width:60px;
  height: 10px;
  background: #FF8C5D;
  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 10px, 0 100%);
}
</style>